<template>
  <div class="goods-tag">
    <div class="goods-tag-content">
      <div class="tags">
        <span class="title">属性管理</span>
        <p class="cate">{{ firstCate + '>' + secondCate + '>' + thirdCate }}</p>

        <Button type="primary" label="新增属性" @click="onAddClick" />

        <template v-for="(item, index) in expendData.list" :key="item.expandparamId">
          <div class="tag-box">
            <div class="tag-top">
              <span class="tag-des">属性{{ index + 1 }}</span>
              <div>
                <Link label="编辑" @click="onEditClick(item)" />
                <Link label="删除" @click="onDeleteClick(item)" />
              </div>
            </div>

            <div class="tag-content">
              <div class="tag-type">
                <span class="tag-title">属性类型</span>
                <span class="tag-name">{{ item.expandparamName }}</span>
              </div>

              <div class="tag-info">
                <span class="tag-label">属性信息</span>
                <ul>
                  <li style="" v-for="tag in item.categoryExpandparamValueList" :key="tag.expandparamValueId">{{ tag.expandparamValueName }}</li>
                </ul>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>

  <Tag :form="expendData.form" v-model:visible="tagVisible" @change="onTagChange" />
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/api'
import Link from '@/components/button/link.vue'
import Button from '@/components/button/button.vue'
import Tag from '@/components/tag/index.vue'

const route = useRoute()

const { catId, firstCate, secondCate, thirdCate } = route.query

const tagVisible = ref(false)
const loading = ref(false)

const expendData = reactive({
  catName: {},
  list: [],
  form: {
    expandparamName: '',
    categoryExpandparamValueList: []
  }
})

const delExpandparam = async (item) => {
  let { err } = await api.post(`/medinstrument/boss/expandparam/delExpandparam?expandparamId=${item.expandparamId} `)
  if (err) {
    ElMessage.error(err)
  } else {
    loadData()
  }
}

const save = async (form) => {
  let url = '/medinstrument/boss/expandparam/addExpandparam'
  let params = { catId, ...form }
  if (form.expandparamId) {
    url = '/medinstrument/boss/expandparam/updateExpandparamValue'

    // TODO:如果list没有变动 提交的时候不需要传

    // expendData.form.categoryExpandparamValueList
  }

  let { err } = await api.post(url, params)
  if (err) {
    ElMessage.error(err)
  } else {
    loadData()
    form.expandparamId ? ElMessage.success('修改成功') : ElMessage.success('新增成功')
  }
}

const loadData = async () => {
  loading.value = true

  let { data, err } = await api.get(`/medinstrument/boss/expandparam/getExpandparamByCatId?CatId=${catId}`)
  loading.value = false
  if (err) {
    ElMessage.error(err)
  } else {
    expendData.list = data.list
  }
}

const onAddClick = () => {
  expendData.form = null
  tagVisible.value = true
}

const onEditClick = (item) => {
  expendData.form = Object.assign({}, item)
  tagVisible.value = true
}

const onDeleteClick = (item) => {
  ElMessageBox.confirm('是否确认删除当前属性?', '删除属性', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    showClose: false,
    closeOnClickModal: false,
    closeOnPressEscape: false
  })
    .then(() => {
      delExpandparam(item)
    })
    .catch(() => {})
}

const onTagChange = (form) => {
  let params = Object.assign({}, form)
  save(params)
}

onMounted(() => {
  loadData()
})
</script>
<style scoped lang="scss">
.goods-tag {
  background-color: #fff;

  .goods-tag-content {
    margin: 10px 15px 10px 10px;

    .tags {
      padding: 20px;

      .title {
        font-size: 16px;
        line-height: 16px;
        font-weight: 500;
        color: #303133;
      }

      .cate {
        margin: 8px 0 20px 0;
        color: #909399;
        line-height: 18px;
      }

      .tag-box {
        border: 1px solid #dcdfe6;
        margin-top: 20px;
        border-radius: 4px;

        .tag-top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          background: #fafafa;
          padding: 16px 10px;

          .tag-des {
            color: #909399;
          }
        }

        .tag-content {
          padding: 20px 20px 10px 20px;
          color: var(--color-text);

          .tag-title,
          .tag-label {
            min-width: 56px;
          }

          .tag-label {
            margin-bottom: 10px;
          }

          .tag-type,
          .tag-info {
            display: flex;
            align-items: center;
            .tag-name,
            ul {
              margin-left: 36px;
            }
          }

          .tag-type {
            margin-bottom: 20px;
          }

          .tag-info {
            ul {
              display: flex;
              flex-wrap: wrap;

              li {
                margin: 0 10px 10px 0;
                background: #f0f2f5;
                padding: 10px;
                border-radius: 4px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
